import React, {Component} from 'react';
import {Grid,Input,Button,Dialog,Tree,Search,Feedback} from '@icedesign/base';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import API from '../../../../../../tools/API';

const {Row, Col} = Grid;
const { Node: TreeNode } = Tree;
/**
*  菜单树
*/
export default class MenuTree extends Component{
  constructor(props) {
     super(props);
     this.state = {
       visible: false,
       data:[],
       label:"",
       value: "",
       expandedKeys: [],
       autoExpandParent: true,
       selectedKeys: [],
       selectedLabels: [],
     };
     this.matchedKeys = [];
     this.handleSearch = this.handleSearch.bind(this);
     this.handleExpand = this.handleExpand.bind(this);
     this.handleSelect = this.handleSelect.bind(this);
  }

  //初始化
  componentWillMount(){
    //获取当前登录用户信息
    API.getMenuListData().then((res) => {
      //设置展开tree
      let openKey = ["0"];
      for(let v of res.result) {
        openKey.push(v.id+"")
      }
      //设置默认值
      this.setState({
        data:res.result,
        expandedKeys:openKey,
        label:this.props.defaultLabel,
        selectedKeys:[this.props.defaultVal+""]
      });
    })
  }


  onOpen = () => {
    this.setState({
      visible: true
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    })
  };

  onOk = () => {
    if(this.state.selectedKeys.length == 0){
      Feedback.toast.prompt("请选择菜单");
      return;
    }
    this.setState({
      label:this.state.selectedLabels
    });
    this.onClose();
    //回调函数
    this.props.renderFun(this.state.selectedKeys[0]);
  }

  handleSearch(result) {
    const value = result.key;
    const matchedKeys = [];
    const loop = data =>
      data.forEach(item => {
        if (item.name.indexOf(value.trim()) > -1) {
          matchedKeys.push(item.id+"");
        }
        if (item.children && item.children.length) {
          loop(item.children);
        }
      });
    loop(this.state.data);

    this.setState({
      value: result.key,
      expandedKeys: matchedKeys,
      autoExpandParent: true
    });
    this.matchedKeys = matchedKeys;
  }

  handleExpand(keys) {
    this.setState({
      expandedKeys: keys,
      autoExpandParent: false
    });
  }

  handleSelect(keys, info) {
   this.setState({
     selectedKeys: keys,
     selectedLabels:info.node.props.label
   });
  }

  render(){
    const loop = data =>
      data.map(item => {
        return (
          <TreeNode label={item.name} key={item.id+""}>
            {item.children && loop(item.children)}
          </TreeNode>
        );
      });
     const { value, expandedKeys, autoExpandParent } = this.state;
     //过滤筛选
     const filterTreeNode = node =>{
       let flag = false;
       for (let i of this.matchedKeys) {
          if (i == node.props.eventKey) {
            flag = true;
          }
       }
       return value && flag;
     }


    return(
      <div>
        <div>
          <Row justify='center'>
            <Col s='9' xxs='6' className="add-user-label">父级菜单：</Col>
            <Col s='15' xxs='18' onClick={this.onOpen}>
                <Input size="large" disabled={true} value={this.state.label} placeholder="" />
            </Col>
          </Row>
        </div>
        <Dialog
          visible={this.state.visible}
          onOk={this.onOk}
          onCancel={this.onClose}
          onClose={this.onClose}
          title="菜单选择"
          className="menu-tree-dialog"
        >
          <Row justify='center'>
            <Col span='24'>
              <div>
                <Search
                  type="primary"
                  size="medium"
                  searchText=""
                  value={value}
                  onSearch={this.handleSearch}
                />
              </div>
              <div style={{margin:10}}>
                <Tree
                  defaultExpandAll = {true}
                  showLine = {true}
                  expandedKeys={expandedKeys}
                  autoExpandParent={autoExpandParent}
                  filterTreeNode={filterTreeNode}
                  onExpand={this.handleExpand}
                  onSelect={this.handleSelect}
                  defaultSelectedKeys={this.state.selectedKeys}
                  >
                    <TreeNode label={'主目录'} key={0}>
                      {loop(this.state.data)}
                    </TreeNode>
                </Tree>
              </div>

            </Col>
          </Row>
        </Dialog>
      </div>
    )
  }

}
